<template>
    <!--<div style="height: 100%; background-color: #FFFFFF;">-->
    <!--<div style="padding: 10px; border-bottom: 1px solid lightgrey">-->
    <!--数据-->
    <!--&lt;!&ndash;<el-button style="float: right; border: 1px; padding: 5px 10px"&ndash;&gt;-->
    <!--&lt;!&ndash;@click="saveLayerInfo">保存&ndash;&gt;-->
    <!--&lt;!&ndash;</el-button>&ndash;&gt;-->
    <!--</div>-->
    <el-container  style="overflow: auto; width:100%; height:100%; margin: 10px 0">
        <el-header style="margin: 10px 0 0; text-align:center;height: 40px;">
            <el-button style="width: 100%; border: 0;margin-left: 4px;line-height: 1.5" type="primary" @click="addLayer">添加数据 +</el-button>
        </el-header>
        <el-main style="padding: 0 0 15px;height: 100%;max-height: 900px">
            <el-form ref="layerInfo" :model="layerInfo" style="overflow: auto">
                <el-form-item v-for="(item, index) in layerInfo.data"
                              :key=index
                              style="margin: 5px 0px;">
                    <div @click.self="showStyle(index)"
                         style="width: 90%; border: 1px solid #c4c4c4; border-radius: 4px; margin: 0px auto; cursor:pointer">
                        <el-switch style="margin-left: 8px;width: 25px;" v-model="item.ifShow"
                                   @change="layerIfShow(item)"></el-switch>
                        <label style="width: 50%;white-space:nowrap;overflow:auto;text-overflow:ellipsis;vertical-align: middle;" @click.stop="showStyle(index)" >{{item.layerName}}</label>
                        <el-checkbox v-model="item.ifCheck" @change="handleCheckChange(index,item)"
                                     style="float: right;margin-bottom: 5px" title="是否选定为属性图层" v-if="item.fieldType!=='external'"></el-checkbox>
                        <i class="el-icon-delete icon" style="margin-right: 8px;" @click.stop="deleteLayer(item)"
                           title="删除图层"></i>
                        <i class="el-icon-aim icon" @click.stop="fitArea(item)" title="图层定位" v-if="item.fieldType!=='external'"></i>
                        <i class="el-icon-caret-bottom icon" @click.stop="downClass(item)"
                           v-if="index!==layerInfo.data.length-1" title="下移图层"></i>
                        <i class="el-icon-caret-top icon" @click.stop="upClass(item)" v-if="index!==0" title="上移图层"></i>
                        <i class="el-icon-document icon" @click.stop="showAttibute(item)" title="图层信息"  v-if="item.fieldType!=='external'"></i>
                        <!--<i class="el-icon-s-data icon" @click.stop="showMapData(item)"></i>-->
                    </div>
                    <el-collapse-transition style="max-height: 200px;overflow:hidden;">
                        <el-container :key="1"
                                      style="width: 90%; margin: 0 auto; border: 1px solid #c4c4c4; border-radius: 4px; text-align: left;"
                                      v-if="item.fieldType.indexOf('D')==0" v-show="item.styleShow">
                            <el-header style="height: 100px;margin-top: 10px">
                                <span class="qian">渲染</span>
                                <el-button type="success" circle size="mini" icon="el-icon-check"
                                           @click="confirmColor(item)"
                                           style="float: right;margin-top: 6px;padding: 3px"></el-button>
                                <el-row style="display: block">渲染方式 : 分类渲染</el-row>
                                <div>
                                    <span>波段选择</span>
                                    <el-select v-model="item.band" placeholder="请选择"
                                               @change="chooseBand(item)"
                                               style="width: 50%;height: 70%" size="mini">
                                        <el-option
                                                v-for="(item2) in item.fields"
                                                :key="item2.value"
                                                :label="item2.label"
                                                :value="item2.value">
                                        </el-option>
                                    </el-select>
                                    <el-row> 颜色选择 :</el-row>
                                </div>
                            </el-header>
                            <el-main style="overflow:auto;max-height: 180px;padding: 5px 0 0 20px;">
                                <div v-for=" (itemColor,index) in item.colorMap" :key=index>
                                    <template>
                                        {{index}}
                                        <el-color-picker size="mini"
                                                         v-model="item.colorMap[index]"
                                                         style="margin: 0 0 0 35px;line-height: 28px;vertical-align: middle"></el-color-picker>
                                    </template>
                                </div>
                            </el-main>
                        </el-container>
                        <el-container :key="2" v-if="item.fieldType.indexOf('C')==0" v-show="item.styleShow"
                                      style="width: 90%; margin: 0 auto; border: 1px solid #c4c4c4; border-radius: 4px; text-align: left;">
                            <el-header>
                                <span class="qian">渲染</span>
                                <el-button type="success" circle size="mini" icon="el-icon-check"
                                           @click="confirmColor(item)"
                                           style="float: right;margin-top:6px;padding: 3px"></el-button>
                                <el-row style="display: block">渲染方式 : 连续渲染</el-row>

                            </el-header>
                            <el-main>
                                <div>
                                    <span>波段选择 : </span>
                                    <el-select v-model="item.band" placeholder="请选择"
                                               @change="chooseBand(item)"
                                               style="width: 50%" size="mini">
                                        <el-option
                                                v-for="(item2) in item.fields"
                                                :key="item2.value"
                                                :label="item2.label"
                                                :value="item2.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div>
                                    <span style="margin-right: 11%">stop :</span>
                                    <el-input-number v-model="item.stops" size="mini"></el-input-number>
                                </div>
                                <div>
                                    <span> 颜色选择</span>

                                    <div style=" box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #EBEEF5;padding: 10px 0 10px 20px">
                                        <div>
                                            <span>起始颜色</span>
                                            <el-color-picker size="mini"
                                                             v-model="item.startColor"
                                                             style="margin: 0 0 0 15px;vertical-align: middle"></el-color-picker>
                                        </div>
                                        <div>
                                            <span>终止颜色</span>
                                            <el-color-picker size="mini"
                                                             v-model="item.endColor"
                                                             style="margin: 0 0 0 15px;vertical-align: middle"></el-color-picker>
                                        </div>
                                    </div>
                                </div>

                            </el-main>
                        </el-container>
                    </el-collapse-transition>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>

</template>

<script>

    import util from '../../common/js/util'
    import * as d3 from "../../../node_modules/d3/dist/d3.js";
    import {requestSearchField} from '../../api/msfield';
    import {requestUpdate} from "../../api/mapservice";

    export default {
        data() {
            return {
                tabPaneArray: [{
                    name: "layer1",
                    label: "dili",
                    data: {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }
                }],
                visi2: false,
                layerInfo: {
                    data: this.$globalConstant.layerInfo.data
                },

            }
        },
        computed: {},
        watch: {
            layerInfo() {
                if (this.$globalConstant.layerInfo.data.length !== 0) {
                    this.$Bus.$emit('layerNumChange', this.$globalConstant.layerInfo.data.length);
                }
            }
        },
        methods: {
            receiveLayer(mapInfo) {
                if (mapInfo.info.featureType == "raster") {
                    // if
                    this.$globalConstant.layerInfo.data.unshift({
                        layerId: mapInfo.info.id,
                        layerName: mapInfo.info.name,
                        layerType: mapInfo.info.featureType,
                        layerUrl: mapInfo.info.url,
                        layerBounds: mapInfo.info.extent,
                        bandIndex: 0,
                        colorRamp: mapInfo.color.colorRampIndex,
                        band: mapInfo.info.band,
                        fields: mapInfo.info.totalBand,
                        field2: "",
                        fieldArr: "",
                        radio: "",
                        layerStyle: {
                            rasterOpacity: "",
                            visibility: "visible",
                        },
                        styleShow: false,
                        ifShow: true,
                        esPath: mapInfo.info.sourcePath,
                        attr: [],
                        ifCheck: false,
                        fieldType: mapInfo.color.fieldType,
                        colorMap: mapInfo.color.colorMap,
                        startColor: mapInfo.color.startColor,
                        endColor: mapInfo.color.endColor,
                        stops: mapInfo.color.stops,
                        min: mapInfo.color.min,
                        max: mapInfo.color.max
                    });
                    //设置图层的初始色带
                    //默认波段->默认渲染属性
                    //获取当前用户

                    this.$globalConstant.map.addLayer({
                        "id": mapInfo.info.id,
                        "type": "raster",
                        "source": {
                            "type": "raster",
                            "tiles": [mapInfo.info.url + "0"],
                            "tileSize": 256,
                        },
                    },'gl-draw-polygon-fill-inactive.cold');
                    let mapUrl={
                        id:mapInfo.info.id,
                        url:mapInfo.info.url + "0",
                        bounds:mapInfo.info.extent
                    };
                    this.$globalConstant.mapUrl.push(mapUrl);
                    // for (let i = 0; i < this.$globalConstant.map.style._order.length; i++) {
                    //     if (this.$globalConstant.map.style._order[i].substring(0, 2).indexOf('gl') !== -1) {
                    //         this.$globalConstant.map.style._order.splice(i, 0, mapInfo.info.id);
                    //         break
                    //     }
                    // }
                    // this.$globalConstant.map.style._order.pop();
                } else {

                }
                let bd = mapInfo.info.extent.split(',');
                let item1 = [bd[0], bd[2]];
                let item2 = [bd[1], bd[3],];
                let bbox = [item1, item2];
                this.$globalConstant.map.fitBounds(bbox);
                console.log(this.$globalConstant.layerInfo);
            },
            confirmColor(item) {
                console.log(this.$globalConstant.layerInfo.data);
                let that = this;
                let url = this.$URL.addMapUrl + item.layerId + '/' + item.band;
                for (let colorStr in item.colorMap) {
                    if(item.colorMap[colorStr].indexOf('#')!==-1){
                        item.colorMap[colorStr] = item.colorMap[colorStr].replace("#", "") + "ff";
                    }
                }
                if(item.startColor.indexOf("#")!==-1){
                    item.startColor = item.startColor.replace("#", "") + "ff";
                }
                if(item.endColor.indexOf("#")!==-1){
                    item.endColor = item.endColor.replace("#", "") + "ff";
                }
                let params = {
                    "fieldType": item.fieldType,
                    "colorMap": item.colorMap,
                    "min": item.min,
                    "max": item.max,
                    "colorRampIndex": item.colorRamp,
                    "stops": item.stops,
                    "startColor": item.startColor,
                    "endColor": item.endColor
                };
                this.$axios.post(url, params).then(res => {
                    if (res.code === 200) {
                        console.log(res);
                        //todo 刷新地图

                        that.$globalConstant.map.removeLayer(item.layerId);
                        that.$globalConstant.map.removeSource(item.layerId);
                        let layerIndex = '';
                        for (let i = 0; i < this.$globalConstant.map.style._order.length; i++) {
                            if (that.$globalConstant.map.style._order[i].substring(0, 2).indexOf('gl') !== -1) {
                                layerIndex = this.$globalConstant.map.style._order[i];
                                break
                            }
                        }
                        that.$globalConstant.map.addLayer({
                            "id": item.layerId,
                            "type": "raster",
                            "source": {
                                "type": "raster",
                                "tiles": [item.layerUrl + item.band],
                                "tileSize": 256,
                                // "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                            },
                        },layerIndex);
                        // that.$globalConstant.map.repaint = true;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取到数据！")
                });
            },
            chooseBand(item) {
                let that = this;
                console.log(item.band);
                let url = this.$URL.addMapUrl + item.layerId + '/' + item.band;
                if (item.startColor.indexOf("#") !== -1) {
                    item.startColor = item.startColor.replace("#", "") + "ff";
                }
                if (item.endColor.indexOf("#") !== -1) {
                    item.endColor = item.endColor.replace("#", "") + "ff";
                }
                let params = {
                    "fieldType": item.fieldType,
                    "colorMap": item.colorMap,
                    "min": item.min,
                    "max": item.max,
                    "colorRampIndex": -1,
                    "stops": item.stops,
                    "startColor": item.startColor,
                    "endColor": item.endColor
                };
                this.$axios.post(url, params).then(res => {
                    if (res.code === 200) {
                        item.fieldType = res.body.fieldType;
                        item.endColor = "#" + res.body.endColor.substring(0, 6);
                        item.startColor = "#" + res.body.startColor.substring(0, 6);
                        for (let color in res.body.colorMap) {
                            res.body.colorMap[color] = "#" + res.body.colorMap[color].substring(0, 6);
                        }
                        item.colorMap = res.body.colorMap;
                        item.stop = res.body.stops;
                        item.min = res.body.min;
                        item.max = res.body.max;
                        item.colorRampIndex = res.body.colorRampIndex;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message.error("未获取到数据！")
                });

            },
            addLayer() {
                let mapServiceVisible = {visible: true,};
                this.$Bus.$emit("mapServiceVisible", mapServiceVisible);
            },
            showStyle(index) {
                if (this.$globalConstant.layerInfo.data[index].styleShow)
                    this.$globalConstant.layerInfo.data[index].styleShow = false;
                else
                    this.$globalConstant.layerInfo.data[index].styleShow = true;
            },
            handleCheckChange(index, item) {
                if (item.ifCheck) {
                    for (let row of this.$globalConstant.layerInfo.data) {
                        if (row.layerId !== item.layerId) {
                            row.ifCheck = false;
                        }
                    }
                    this.$Bus.$emit("currentLayerName", item.esPath);
                } else {
                    for (let row of this.$globalConstant.layerInfo.data) {
                        row.ifCheck = false;
                    }
                }
                this.$forceUpdate();
            },


            //地图定位到当前图层位置
            fitArea(item) {
                let bd = item.layerBounds.split(',');
                let item1 = [bd[0], bd[2]];
                let item2 = [bd[1], bd[3],];
                let bbox = [item1, item2];
                this.$globalConstant.map.fitBounds(bbox);
            },
            saveLayerInfo() {
                localStorage.setItem("layerInfo", JSON.stringify(this.$globalConstant.layerInfo));
                if (this.$globalConstant.layerInfo.data.length > 0) {
                    let indicator = 0;
                    this.$globalConstant.layerInfo.data.forEach((item, index) => {
                        let searchParams = {
                            id: this.$globalConstant.layerInfo.data[index].layerId,
                            styleInfo: JSON.stringify(this.$globalConstant.layerInfo.data[index])
                        };
                        requestUpdate(searchParams).then(res => {
                            let {message, code, body} = res.data;
                            if (code !== 200) {
                                indicator = 1;
                                this.$message({
                                    message: this.$globalConstant.layerInfo.data[index].layerName + '样式保存失败！' + message,
                                    type: 'error'
                                });
                            }
                        });
                    });
                    let that = this;
                    setTimeout(function () {
                        if (indicator == 0) {
                            that.$message({
                                message: '样式保存成功！'
                            });
                        }
                    }, 1000);
                }
            },
            deleteLayer(item) {
                let index = this.$globalConstant.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    this.$globalConstant.layerInfo.data.splice(index, 1);
                    this.$globalConstant.map.removeLayer(item.layerId);
                    this.$globalConstant.map.removeSource(item.layerId);
                }
             for(let i=0;i< this.$globalConstant.mapUrl.length;i++){
                 if (this.$globalConstant.mapUrl[i].id===item.layerId){
                     this.$globalConstant.mapUrl.splice(i,1)
                 }
             }
                this.$Bus.$emit('closelayerAttr',false);
            },
            layerIfShow(item) {
                let index = this.$globalConstant.layerInfo.data.indexOf(item);
                if (item.ifShow) {
                    this.$globalConstant.map.setLayoutProperty(item.layerId, 'visibility', 'visible');
                    this.$globalConstant.layerInfo.data[index].layerStyle.visibility = "visible";
                } else {
                    this.$globalConstant.map.setLayoutProperty(item.layerId, 'visibility', 'none');
                    this.$globalConstant.layerInfo.data[index].layerStyle.visibility = "none";
                }
            },
            legendIfShow(item) {
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            }
            ,
            changeLegendName(item) {
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            }
            ,
            //图层上移
            upClass(item) {
                let index =this.$globalConstant.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    this.$globalConstant.map.moveLayer(this.$globalConstant.layerInfo.data[index - 1].layerId, this.$globalConstant.layerInfo.data[index].layerId);
                    this.$globalConstant.layerInfo.data[index] = this.$globalConstant.layerInfo.data.splice(index - 1, 1, this.layerInfo.data[index])[0];
                }
            }
            ,
            //图层下移
            downClass(item) {
                let index = this.$globalConstant.layerInfo.data.indexOf(item);
                if (index !== -1) {
                    this.$globalConstant.map.moveLayer(this.$globalConstant.layerInfo.data[index].layerId, this.$globalConstant.layerInfo.data[index + 1].layerId);
                    this.$globalConstant.layerInfo.data[index] = this.$globalConstant.layerInfo.data.splice(index + 1, 1, this.$globalConstant.layerInfo.data[index])[0];
                }
            }
            ,
            //显示图层数据
            showAttibute(item) {
                let that = this;
                let url = this.$URL.datasetPreviewUrl;
                //悦艺新写的模型item.esPath.indexOf("PG")!=-1,则emit的值为空
                if(item.esPath.indexOf("ES")!=-1){
                    that.$Bus.$emit("attrDataUrl", item.esPath.substring(3,item.esPath.length));
                }else{
                    this.$message({
                        message: "不能查看tiff数据切出来的瓦片服务信息",
                        type: 'error'
                    });
                }

            }
            ,
            //显示图层图表
            showMapData(item) {
                let vis = {
                    visible: true,
                    id2: "10001",
                    id3: "10002",
                    id4: "10003"
                };
                this.$Bus.$emit("vis", vis);
                //根据index去读取放在tab里面的内容
                // push进tabPaneArray
            }
            ,
            chooseAttr(index, layerId, field) {
                let searchParams = {
                    serviceID: layerId,
                    fieldName: field
                };
                requestSearchField(searchParams).then(res => {
                    let {message, code, body} = res.data;
                    if (code !== 200) {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        if (body.result.length > 0) {
                            //var index = this.layerInfo.data.indexOf(item);
                            this.$globalConstant.layerInfo.data[index].fieldArr = body.result[0].fieldValue;
                            this.$globalConstant.layerInfo.data[index].fieldType = body.result[0].fieldType;
                            this.reRender(this.$globalConstant.layerInfo.data[index]);
                        }
                    }
                });
            }
            ,

            reRenderRaster(item) {
                let url = "http://localhost:8999/dbfg/gttileservice/LCRA/geotrellis/{z}/{x}/{y}/";
                let layerId = item.layerId;
                let bandIndex = item.fields.fields.findIndex(x => x.name === item.field);
                let colorRamp = item.colorRamp;
                this.$axios.get(url + bandIndex)
                    .then(function (res) {


                    });
                this.$globalConstant.map.removeLayer(layerId);
                this.$globalConstant.map.removeSource(layerId);
                this.$globalConstant.map.addLayer({
                    'id': layerId,
                    'type': "raster",
                    "source": {
                        "type": "raster",
                        "tiles": [url + bandIndex + "/" + colorRamp],
                        "tileSize": 256,
                        "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                    }
                });
            },
            reRender(item) {
                let fieldArr = item.fieldArr.split(",").map(Number).sort((a, b) => a - b);
                let min = Number(fieldArr[0]);
                let max = Number(fieldArr[fieldArr.length - 1]);
                let Arr = null;
                Arr = this.equalInterval(min, max, item.layerStyle.classNum + 1);
                let normArr;
                normArr = Arr.map(ele => (ele - min) / (max - min));
                let colorArr = [];
                switch (item.layerStyle.colormap) {
                    case "Reds":
                        colorArr = normArr.map(ele => d3.interpolateReds(ele));
                        break;
                    case "Oranges":
                        colorArr = normArr.map(ele => d3.interpolateOranges(ele));
                        break;
                    case "Greens":
                        colorArr = normArr.map(ele => d3.interpolateGreens(ele));
                        break;
                    case "Greys":
                        colorArr = normArr.map(ele => d3.interpolateGreys(ele));
                        break;
                    case "Blues":
                        colorArr = normArr.map(ele => d3.interpolateBlues(ele));
                        break;
                    case "Purples":
                        colorArr = normArr.map(ele => d3.interpolatePurples(ele));
                        break;
                }
                let valueArr;
                let legendValue = [];
                valueArr = this.equalInterval(min, max, item.layerStyle.classNum);
                valueArr.unshift(min);
                valueArr.push(max);
                let colorSubsection = [
                    'step',
                    ['get', item.field],
                ];
                for (let i = 0; i < valueArr.length - 1; i++) {
                    colorSubsection.push(colorArr[i]);
                    colorSubsection.push(valueArr[i + 1]);
                    let legendSingle = {
                        "name": valueArr[i].toFixed(6) + "-" + valueArr[i + 1].toFixed(6),
                        "color": colorArr[i]
                    };
                    legendValue.push(legendSingle)
                }
                colorSubsection.push(colorArr[colorArr.length - 1]);
                if (item.layerType === "polygon") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'fill-color', colorSubsection);
                    item.layerStyle.fillColor = colorSubsection;
                } else if (item.layerType === "line") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'line-color', colorSubsection);
                    item.layerStyle.lineColor = colorSubsection;
                } else if (item.layerType === "point") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'circle-color', colorSubsection);
                    item.layerStyle.circleColor = colorSubsection;
                }

                let index = this.$globalConstant.layerInfo.data.indexOf(item);
                this.$globalConstant.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            }
            ,
            equalInterval(min, max, classNum) {
                let inter = (max - min) / classNum;
                let dataArr = [];
                for (let i = 1; i < classNum; i++) {
                    let val = min + i * inter;
                    dataArr.push(val);
                }
                return dataArr;
            }
            ,
            reRenderSingle(item) {
                let valueArr = item.fieldArr.split(",");
                let normArr = null;
                normArr = this.equalInterval(0, 1, valueArr.length + 1);
                let colorArr = [];
                switch (item.layerStyle.colormap2) {
                    case "OrRd":
                        colorArr = normArr.map(ele => d3.interpolateOrRd(ele));
                        break;
                    case "PRGn":
                        colorArr = normArr.map(ele => d3.interpolatePRGn(ele));
                        break;
                    case "BuGn":
                        colorArr = normArr.map(ele => d3.interpolateBuGn(ele));
                        break;
                    case "BuPu":
                        colorArr = normArr.map(ele => d3.interpolateBuPu(ele));
                        break;
                    case "RdYlBu":
                        colorArr = normArr.map(ele => d3.interpolateRdYlBu(ele));
                        break;
                    case "PuBuGn":
                        colorArr = normArr.map(ele => d3.interpolatePuBuGn(ele));
                        break;
                    case "Spectral":
                        colorArr = normArr.map(ele => d3.interpolateSpectral(ele));
                        break;
                    case "Paired":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePaired[Math.floor(ele * 12)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Pastel1":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePastel1[Math.floor(ele * 9)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Pastel2":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemePastel2[Math.floor(ele * 8)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                    case "Set3":
                        colorArr = normArr.map(ele => {
                            let hex = d3.schemeSet3[Math.floor(ele * 12)];
                            console.log(hex);
                            if (hex.length == 7) {
                                return (
                                    "rgb(" +
                                    parseInt("0x" + hex.slice(1, 3)) +
                                    "," +
                                    parseInt("0x" + hex.slice(3, 5)) +
                                    "," +
                                    parseInt("0x" + hex.slice(5, 7)) +
                                    ")"
                                );
                            } else {
                                return hex;
                            }
                        });
                        break;
                }
                let stops = [];
                let legendValue = [];
                for (let i = 0; i < valueArr.length; i++) {
                    if (item.fieldType === "string")
                        stops.push([valueArr[i], colorArr[i]]);
                    else
                        stops.push([Number(valueArr[i]), colorArr[i]]);
                    let legendSingle = {
                        "name": valueArr[i],
                        "color": colorArr[i]
                    };
                    legendValue.push(legendSingle)
                }
                let colorSingleValue = {
                    "property": item.field2,
                    "type": "categorical",
                    "stops": stops
                };
                if (item.layerType === "polygon") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'fill-color', colorSingleValue);
                    item.layerStyle.fillColor = colorSingleValue;
                } else if (item.layerType === "line") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'line-color', colorSingleValue);
                    item.layerStyle.lineColor = colorSingleValue;
                } else if (item.layerType === "point") {
                    this.$globalConstant.map.setPaintProperty(item.layerId, 'circle-color', colorSingleValue);
                    item.layerStyle.circleColor = colorSingleValue;
                }

                let index = this.$globalConstant.layerInfo.data.indexOf(item);
                this.$globalConstant.layerInfo.data[index].layerStyle.legendValue = legendValue;
                let legendInfo = {
                    id: item.layerId,
                    type: item.layerType,
                    name: item.layerStyle.legendName,
                    ifShow: item.layerStyle.legendShow,
                    value: item.layerStyle.legendValue
                };
                this.$Bus.$emit("legendInfo", legendInfo);
            }
            ,
        },

        created() {
            let that = this;
            // alert("11")
            // this.$Bus.$on("serviceAdding", res => {
            //     let that = this;
            //     if (res !== undefined) {
            //         if (res.featureType === "raster") {
            //             that.layerInfo.data.unshift({
            //                 layerId: res.id,
            //                 layerName: res.name,
            //                 layerType: res.featureType,
            //                 layerUrl: res.url,
            //                 layerBounds: util.formatXY(res.extent),
            //                 bandIndex: 0,
            //                 colorRamp: "",
            //                 field: JSON.parse(res.fieldInfo).fields[0].name,
            //                 fields: JSON.parse(res.fieldInfo),
            //                 field2: "",
            //                 fieldArr: "",
            //                 fieldType: "",
            //                 radio: "",
            //                 layerStyle: {
            //                     rasterOpacity: "",
            //                     visibility: "visible",
            //                 },
            //                 styleShow: false,
            //                 ifShow: true,
            //                 attr: [],
            //                 ifCheck: false
            //             });
            //             this.$globalConstant.map.addLayer({
            //                 'id': res.id,
            //                 'type': res.featureType,
            //                 "source": {
            //                     "type": res.featureType,
            //                     "tiles": [res.url],
            //                     "tileSize": 256,
            //                     "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
            //                 }
            //             });
            //         } else {
            //             if (res.styleInfo !== null && res.styleInfo !== "") {
            //                 that.layerInfo.data.unshift(JSON.parse(res.styleInfo));
            //                 that.layerInfo.data[0].layerStyle.legendShow = false;
            //                 if (res.featureType === "polygon")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "fill",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "fill-color": JSON.parse(res.styleInfo).layerStyle.fillColor,
            //                             "fill-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
            //                             'fill-outline-color': JSON.parse(res.styleInfo).layerStyle.outlineColor
            //                         }
            //                     });
            //                 else if (res.featureType === "line")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "line",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "line-color": JSON.parse(res.styleInfo).layerStyle.lineColor,
            //                             "line-width": JSON.parse(res.styleInfo).layerStyle.lineWidth,
            //                             "line-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
            //                         }
            //                     });
            //                 else if (res.featureType === "point")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "circle",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "circle-color": JSON.parse(res.styleInfo).layerStyle.circleColor,
            //                             "circle-radius": JSON.parse(res.styleInfo).layerStyle.circleRadius,
            //                             "circle-opacity": JSON.parse(res.styleInfo).layerStyle.fillOpacity / 100,
            //                         }
            //                     });
            //             } else {
            //                 that.layerInfo.data.unshift({
            //                     layerId: res.id,
            //                     layerName: res.name,
            //                     layerType: res.featureType,
            //                     layerUrl: res.url,
            //                     layerBounds: util.formatXY(res.extent),
            //                     field: "",
            //                     field2: "",
            //                     fields: JSON.parse(res.fieldInfo),
            //                     fieldType: "",
            //                     radio: "singleColor",
            //                     layerStyle: {
            //                         colormap: "",
            //                         colormap2: "",
            //                         classNum: "",
            //                         fillColor: "",
            //                         fillOpacity: "",
            //                         outlineColor: "",
            //                         circleColor: "",
            //                         circleRadius: "",
            //                         lineColor: "",
            //                         lineWidth: "",
            //                         label: "",
            //                         legendShow: false,
            //                         legendName: res.name,
            //                         legendValue: [],
            //                         visibility: "visible",
            //                     },
            //                     styleShow: false,
            //                     ifShow: true,
            //                     attr: [{
            //                         date: '2016-05-02',
            //                         name: '王小虎',
            //                         address: '上海市普陀区金沙江路 1518 弄'
            //                     }],
            //                 });
            //                 if (res.featureType === "polygon")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "fill",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "fill-color": "rgba(200, 100, 240, 0.8)",
            //                             'fill-outline-color': "rgba(200, 100, 240, 1)"
            //                         }
            //                     });
            //                 else if (res.featureType === "line")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "line",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "line-color": "rgba(200, 100, 240, 1)",
            //                             "line-width": 3
            //                         }
            //                     });
            //                 else if (res.featureType === "point")
            //                     this.$globalConstant.map.addLayer({
            //                         "id": res.id,
            //                         "type": "circle",
            //                         "source": {
            //                             "type": "vector",
            //                             "scheme": "tms",
            //                             "tiles": [res.url],
            //                         },
            //                         "source-layer": res.name,//必须是url定义的layer名
            //                         "paint": {
            //                             "circle-color": "rgba(200, 100, 240, 0.8)",
            //                             "circle-radius": 3
            //                         }
            //                     });
            //             }
            //         }
            //         let mapServiceVisible = {
            //             visible: false,
            //         };
            //         that.$Bus.$emit("addLayerSuccess", mapServiceVisible);
            //         //console.log(global.map.style._layers);
            //
            //     }
            // });
            this.$Bus.$off('mapInfo');//组件销毁时关闭监听
            this.$Bus.$on("mapInfo", res => {
                if (res !== undefined) {
                    that.receiveLayer(res);
                    // alert("222")
                    // this.layerInfo.data=this.$globalConstant.layerInfo.data;
                    this.$forceUpdate();
                }
            })
        },
        beforeDestroy(){
            this.$Bus.$off('getUnitId',this.receiveLayer);//组件销毁时关闭监听
        },
    }
</script>

<style>

    .qian {
        padding-left: 5px;
        border-left: 5px solid #3a8ee6;
        margin-bottom: 10px;
    }

    .biao {
        padding-left: 20px;
        text-align: center;
    }

    div::-webkit-scrollbar {
        width: 0;
    }

    .icon {
        float: right;
        margin: 12px 2px;
    }


</style>